<template>
    <div class="dashboard-container">
        <my-search :fields="fieldsList" :baseNumber="4" @onSearch="searchForm" @onReset="resetForm" />
         <div class="btn">
            <el-button type="info" plain size="mini" icon="el-icon-delete-solid" >删除</el-button>
             <el-button type="info" plain size="mini"  >
                <svg-icon icon-class="upload" />  
                名册导入</el-button>
             <el-button type="info" plain size="mini"  >
                <svg-icon icon-class="download" />
                模板下载</el-button>
         </div>
        <div class="table-list">
            <my-table v-loading="loading" 
            ref="myEltable" 
            style="width: 100%" 
            row-key="id" 
            :showsummary="false" 
            :columns="tableColumns" 
            :tableData="tableDatas" 
            :pageNum="queryObj.pageNo" 
            :pageSize="queryObj.pageSize" 
            :totalPage="total" 
            :height="$store.state.app.windowHeight - 200" max-height="660px" :current="true" @onCurrentChange="changepageNo" @onPageSizeChange="changePageSize" highlight-current-row />
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
    name: 'Dashboard',

    data() {
        return {
          loading:false,
            fieldsList: [
                {
                    label: '企业名称:',
                    field: 'frgsmc',
                    type: 'text',
                    value: ''
                },
                {
                    label: '企业类型:',
                    field: 'nsrxydjList',
                    type: 'select',
                    value: [],
                    multiple: true,
                    options: []
                }
                
            ],
            //右侧表格开始
            tableColumns: [
                {
                    label: '企业名称',
                    prop: 'frgsmc',
                    align: 'left',
                    halign: 'center',
                    minWidth: 275,
                    render: (h, params) => {
                        return <span style="color:#409EFF">{params.row.frgsmc}</span>;
                    }
                },
                {
                    label: '企业类型',
                    prop: 'nsrxydj',
                    align: 'left',
                    minWidth: 120,
                    /*render: (h, params) => {
                        return <dict-tag options={this.dict.type.jtxx_qyxydj} value={params.row.nsrxydj} />;
                    }*/
                },
                {
                    label: '是否上市公司',
                    prop: 'nsrzg',
                    align: 'left',
                    minWidth: 180,
                    /*render: (h, params) => {
                        return <dict-tag options={this.dict.type.jtxx_nsrzz} value={params.row.nsrzg} />;
                    }*/
                },
               
                {
                    label: '标签',
                    prop: 'qysdshzsblx',
                    align: 'left',
                    minWidth: 150,
                    render: (h, params) => {
                        // return <dict-tag options={this.dict.type.jtxx_qysdshzsblx} value={params.row.qysdshzsblx} />;
                    }
                },
                {
                    label: '操作',
                    prop: 'caozuo',
                    align: 'center',
                    width: 150,
                    render: (h, params) => {
                        return (
                            <span>
                                <el-button type="text" onClick={() => this.handleViewClick(params.row)}>查看</el-button>
                                <el-button type="text" onClick={() => this.handleBJClick(params.row)}>编辑</el-button>
                                <el-button type="text" onClick={() => this.handleDeleteClick(params.row)}>
                                    删除
                                </el-button>
                            </span>
                        );
                    }
                }
               
               
               
                
            ],
            tableDatas: []
            , queryObj: {
                frgsmc: '', //公司名称
                nsrxydjList: [],
                nsrzgList: [],
                zzshzsblxList: [],
                qysdshzsblxList: [],
                jyztDmList: [],
                hyDmList: [],
                qylxDmList: [],
                pageNo: 1,
                pageSize: 20
            },
            total: 0
        }
    },
    computed: {
        ...mapGetters([
            'name'
        ])
    },
    mounted() {
    },
    methods: {

        searchForm(params) {
            console.log(params, '查询条件');
            this.queryObj.frgsmc = params.frgsmc || '';
            this.queryObj.nsrxydjList = params.nsrxydjList || [];
            this.queryObj.nsrzgList = params.nsrzgList || [];
            this.queryObj.zzshzsblxList = params.zzshzsblxList || [];
            this.queryObj.qysdshzsblxList = params.qysdshzsblxList || [];
            this.queryObj.jyztDmList = params.jyztDmList || [];
            this.queryObj.hyDmList = params.hyDmList || [];
            this.queryObj.qylxDmList = params.qylxDmList || [];
            this.getTableData();
        },
        resetForm() {
            for (let key in this.queryObj) {
                if (key == 'pageNo') {
                    this.queryObj[key] = 1;
                } else if (key == 'pageSize') {
                    this.queryObj[key] = 20;
                } else if (key == 'frgsmc') {
                    this.queryObj[key] = '';
                } else {
                    this.queryObj[key] = [];
                }
            }
            this.getTableData();
        },
        getTableData() {

        },
         changepageNo(currPage) {
            this.queryObj.pageNo = currPage;
            this.getTableData();
        },
        changePageSize(pageSize) {
            this.queryObj.pageSize = pageSize;
            this.getTableData();
        },
    }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
    height: 100%;
    width: 100%;
    background-color: #fff;
    padding: 8px;
    .btn{
        padding:8px 8px 8px 0;
    }
}
</style>
